/// Contains all application level Sass mixins

/// Event wrapper
/// @param {Bool} $self [false] - Whether or not to include current selector
/// @link https://twitter.com/csswizardry/status/478938530342006784
@mixin on-event($self: false) {
  @if $self {
    &,
    &:hover,
    &:active,
    &:focus {
      @content;
    }
  } @else {
    &:hover,
    &:active,
    &:focus {
      @content;
    }
  }
}

/// Make a context based selector a little more friendly
/// @param {String} $context
@mixin when-inside($context) {
  #{$context} & {
    @content;
  }
}

/// Sets equal width and height properties, and 50% border radius
/// @param {Size} $size width and height for the image
@mixin round-image($size) {
  width: $size;
  height: $size;
  max-width: 100%;
  border-radius: 50%;
}

/// Breakpoint manager
/// @param {String} $breakpoint - a string that maps to a breakpoint key in $breakpoints
/// @requires $breakpoints
@mixin respond-to($breakpoint) {
  $breakpoint-query: map-get($breakpoints, $breakpoint);

  @if $breakpoint-query {
    $query: if(type-of($breakpoint-query) == 'string', unquote($breakpoint-query), inspect($breakpoint-query));

    @media #{$query} {
      @content;
    }
  } @else {
    @error 'Could not find `#{$breakpoint}` in `$breakpoints`';
  }
}

/// Applies flex styles that center an elements contents  on the main and cross axes
///   i.e. vertically and horizontally
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/// Applies flex box centering using the flex-center mixin,
///   but sets the main axis to column
@mixin flex-column-center {
  @include flex-center;
  flex-direction: column;
}

/// Applies full -screen dimensions to the specified element
@mixin full-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  overflow-y: auto;
}

/// Proxy for AD container styles
@mixin nacho-container {
  border: 1px solid get-color(black, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
  padding: item-spacing(4);
  background-color: get-color(white);
  background-clip: padding-box;
  border-radius: 2px;
  transition: box-shadow 83ms;
}

/// Temp implementation before Auto Prefixer is installed
/// @link https://github.com/postcss/autoprefixer

/// Vendor prefix helper
/// @param {String} $property - CSS property to be prefixed
/// @param {*} $value to be prefixed
/// @param {List} $prefixes prepend prefixes
@mixin prefix($property, $value, $prefixes: ()) {
  @each $prefix in $prefixes {
    -#{$prefix}-#{$property}: $value;
  }

  #{$property}: $value;
}

/// Maintains the aspect ratio for a wrapped element
/// @param {Number} $width number value for the container's width ratio
/// @param {Number} $height number value for the container's with ratio
@mixin aspect-ratio($width, $height) {
  position: relative;

  &::before {
    content: '';
    display: block;
    width: 100%;
    padding-top: ($height / $width) * 100%;
  }

  > * {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
  }
}

/// Applies rules to render an element with a tag shape
/// @param {Color} $bg-color the background color for the tag
/// @param {Color} $color font/text color
/// @param {Color} $border-color=$bg-color the color to apply to the tag border
///@example - Usage
/// .foo {
///   @include tag(get-color(gray1), get-color(gray6));
/// }
@mixin tag($bg-color, $color, $border-color: $bg-color) {
  border-radius: 32px;
  background-color: $bg-color;
  border: 1px solid $border-color;
  color: $color;
  display: inline-block;
  line-height: item-spacing(3);
  padding: 1px 10px;
}
